<template>
  <div id="ServerAlarmLog" ref="ServerAlarmLog" class="ServerAlarmLog">
    <el-table
      :header-cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0px 0px 0px 0px',
        'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
      }"
      :cell-style="{
        background: 'rgb(2, 16, 51)',
        color: 'aliceblue',
        border: '0px',
        'text-align': 'center',
        padding: '0 0 0 0',
      }"
      :data="tableDataFn"
      height="100%"
      width="95%"
      :fit="true"
    >
      <template v-for="item in tableColumns">
        <el-table-column :prop="item.prop" :label="item.label" align="center" :key="item.prop">
          <template v-slot="scope">
            <template v-if="item.format == 'INFO'">
              <el-tag @click="dialogOpen(scope.row)" effect="dark" size="mini" class="dialogOpenButton">查看</el-tag>
            </template>
            <template v-else>
              <div>
                {{ scope.row[item.prop] }}
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
   <el-dialog
  title="详细信息"
  :visible.sync="dialogVisible"
  width="30%"
  >
 
    <el-form label-width="100px" class="demo-ruleForm" >
          <el-form-item label="id">
            <span>{{ dialogData.iid }}</span>
          </el-form-item>
          <el-form-item label="名称">
            <span>{{ dialogData.db }}</span>
          </el-form-item>
          <el-form-item label="用户">
            <span>{{ dialogData.uuser }}</span>
          </el-form-item>
          <el-form-item label="端口">
            <span>{{ dialogData.host }}</span>
          </el-form-item>
          <el-form-item label="持续时间">
            <span>{{ dialogData.tiime }}</span>
          </el-form-item>
          <el-form-item label="状态">
            <span>{{ dialogData.state!=='null'?'空':dialogData.state  }}</span>
          </el-form-item>
          <el-form-item label="语句">
            <span>{{ dialogData.info }}</span>
          </el-form-item>
          <el-form-item label="记录时间">
            <span>{{ dialogData.RecordTime }}</span>
          </el-form-item>
        </el-form>

  
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getThreadconnect } from "@/api/index.js";
import bus from "common/bus.js";
import tableColumns from "./Threadconnect.js";
// Threadconnect

export default {
  data() {
    return {
      postData: {
        opera: "osalertlist",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      tableData: [],
      tableColumns: tableColumns,
      timerName: "ServerAlarmLog",
      timerEventName: "timerServerAlarmLog",
      timerInterval: 1000 * 60,
      selectedMonID: {},
      dialogVisible: false,
      dialogData:''
    };
  },
  created() {
    bus.$on("selectedMonIDMysql", (msg) => {
      this.resetData();

      this.selectedMonID = msg;
      this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
        this.getData();
      
      // this.getData();
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        // this.resetData();

        // this.getData();
      }
    });
  },
  mounted() {},
  computed: {
    tableDataFn() {
      return this.tableData.filter((item) => {
        // switch (item.ALERT_LEVEL) {
        //     case 1:
        //         item.ALERT_LEVEL = '提醒';
        //         item.levelType = 'info';
        //         break;
        //     case 2:
        //         item.ALERT_LEVEL = '普通';
        //         item.levelType = 'warning';
        //         break;
        //     case 3:
        //         item.ALERT_LEVEL = '紧急';
        //         item.levelType = 'danger';
        //         break;

        //     default:
        //         break;
        // }
        item.host = item.host.split(":")[1];

        return item;
      });
    },
  },
  methods: {
    getData() {
      getThreadconnect({
        ip: this.selectedMonID.selectedIP,
        dbServername: this.selectedMonID.selectedDBNAME,
      }).then((res) => {
        this.tableData = res;
      });
    },
    resetData() {
      this.tableData = [];
    },
    dialogOpen(data){
      this.dialogVisible=true
      this.dialogData=data

    }
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
     bus.$off('selectedMonIDMysql')
  },
  watch: {},
};
</script>

<style scoped>
.ServerAlarmLog {
  height: calc(100% - 8px - 22px);
}
.ServerAlarmLog >>> .el-table::before {
  height: 0px !important;
}
.ServerAlarmLog >>> .el-table tr {
  background-color: rgba(1, 40, 107, 0) !important;
}
.ServerAlarmLog >>> .el-table {
  background: rgb(2, 16, 51);
}
.ServerAlarmLog >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ServerAlarmLog >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
.dialogOpenButton {
  cursor: pointer;
}
/* .demo-table-expand {
  font-size: 0;
  width: 100%;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
} */
</style>    